<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .a{
      display: none;
    }
    .b{
      display: block;
    }
  </style>
    <meta charset="UTF-8">
    <title>Title</title>
  <link href="../css/all.css" rel="stylesheet" type="text/css">
</head>
<body>
<button> 元素1 </button>
<button> 元素2 </button>
<div class="b">元素1</div>
<div class="a">元素2</div>
<script>
  var bu = document.querySelectorAll("button");
  var di = document.querySelectorAll("div");
  for (let i = 0; i < bu.length; i++) {
    bu[i].setAttribute("index",i);
  bu[i].onclick=function (){
    for (let j = 0; j < bu.length; j++) {
      di[j].className="a";
    }
    di[bu[i].getAttribute("index")].className="b";
  }
  }
</script>
</body>
</html>